<template>
    <div :id="id" class="chart-box"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        id: {
            type: String,
            default: () => {
                return 'lineChart'
            }
        }
    },
    data() {
        return {
            myChart: undefined,
            option: {}
        };
    },
    destroyed() {
        window.removeEventListener("resize", () => {})
    },
    methods: {
        init(info) {
            var chartDom = document.getElementById(this.id);
            this.myChart = echarts.init(chartDom, 'macarons');
            // //当 鼠标移到线条上时触发
            // this.myChart.on('mousemove', function (params) {
            //     window.selectSeries = params.seriesName;
            // });
            // //当 鼠标移出线条时触发 ，如果不处理这个，鼠标移到空白上还有tooltip显示。
            // this.myChart.on('mouseout', function (params) {
            //     window.selectSeries = '';
            // });
            this.option = {
                tooltip: {
                    trigger: 'axis',
                    // formatter: function (params) {
                    //     var res = "";
                    //     if (window.selectSeries) {
                    //         for (var i = 0; i < params.length; i++) {
                    //             var series = params[i];
                    //             if (series.seriesName == window.selectSeries) {
                    //                 res = `<div style="font-size: 14px;">${series.axisValue}</div><div style="width: fit-content; display: flex; align-items: center; padding-top: 4px; font-size: 14px;">
                    //                 ${series.marker}<div style="min-width: 100px; margin-right: 20px;">${series.seriesName}</div><div style="font-weight: bold;">${series.data}</div>
                    //             </div>`
                    //                 break;
                    //             }
                    //         }
                    //     } else {
                    //         for (var i = 0; i < params.length; i++) {
                    //             let str = `<div style="width: fit-content; display: flex; align-items: center; padding-top: 4px; font-size: 14px;">
                    //                 ${params[i].marker}<div style="min-width: 100px; margin-right: 20px;">${params[i].seriesName}</div><div style="font-weight: bold;">${params[i].data}</div>
                    //             </div>`
                    //             res = res + (i === 0 ? `<div style="font-size: 14px;">${params[i].axisValue}</div>` : '') + str;
                    //         }
                    //     }
                    //     return res;
                    // }
                },
                legend: {
                    top: '3%',
                    itemWidth: 20,
                    itemHeight: 8,
                    itemGap: 24,
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.85)'
                    }
                },
                grid: {
                    top: '15%',
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: info.date || [],
                    axisTick: {
                        alignWithLabel: true,
                        inside: true
                    },
                    axisLabel: {
                        color: 'rgba(0, 0, 0, 0.85)'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#000000' //最左侧Y轴颜色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(0, 0, 0, 0.85)'
                    }
                },
                series: [
                    {
                        name: '待付款',
                        type: 'line',
                        symbol: 'emptyCircle',
                        symbolSize: 7,
                        smooth: true,
                        color: ['#405DF9'],
                        data: info.dataA || []
                    },
                    {
                        name: '已付款',
                        type: 'line',
                        symbol: 'emptyCircle',
                        symbolSize: 7,
                        smooth: true,
                        color: ['#F99421'],
                        data: info.dataB || []
                    }
                ]
            }
            this.option && this.myChart.setOption(this.option);
            window.addEventListener("resize", () =>{
                this.myChart.resize();
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.chart-box {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>